<script src="@/assets/js/LoginAndRegisterView" />

<template>
  <div class="login-register-container">
    <div class="form-container">
      <div class="form-toggle">
        <button :class="{ active: isLogin }" @click="isLogin = true">登录</button>
        <button :class="{ active: !isLogin }" @click="isLogin = false">注册</button>
      </div>

      <div class="form-content">
        <!-- 登录表单 -->
        <form v-if="isLogin" class="login-form" @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="gitUserName">用户名</label>
            <input
              id="gitUserName"
              v-model="loginForm.gitUsername"
              type="text"
              placeholder="请输入用户名"
              required
            />
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input
              id="password"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              required
            />
          </div>

          <div class="form-group">
            <div class="captcha-container">
              <input
                v-model="loginForm.verificationCode"
                type="text"
                placeholder="请输入验证码"
                class="captcha-input"
                required
              />
              <img :src="captchaImage" alt="验证码" class="captcha-image" @click="refreshCaptcha" />
            </div>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>

          <button type="submit" class="submit-btn">登录</button>

          <div class="social-login">
            <p>其他登录方式</p>
            <div class="social-icons">
              <span class="icon">gitHub</span>
              <span class="icon">gitee</span>
            </div>
          </div>
        </form>

        <!-- 注册表单 -->
        <form v-else class="register-form" @submit.prevent="handleRegister">
          <div class="form-group">
            <label for="gitUserName">用户名</label>
            <input
              id="gitUserName"
              v-model="registerForm.username"
              type="text"
              placeholder="请输入用户名"
              required
            />
          </div>

          <div class="form-group">
            <label for="email">邮箱</label>
            <input
              id="email"
              v-model="registerForm.email"
              type="email"
              placeholder="请输入邮箱"
              required
            />
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input
              id="password"
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
              required
            />
          </div>

          <div class="form-group">
            <label for="rePassword">确认密码</label>
            <input
              id="rePassword"
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              required
            />
          </div>

          <div class="form-group">
            <div class="privacy-policy">
              <input type="checkbox" v-model="registerForm.agree" required />
              <span>我已阅读并同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></span>
            </div>
          </div>

          <button type="submit" class="submit-btn">注册</button>
        </form>
      </div>
    </div>
  </div>
</template>
